<template>
  <el-row style="display: flex;justify-content: center;margin: 35px;">
    <el-col>
      <el-button type="success" @click="add">新增信息</el-button>
    </el-col>
    <div style="margin: 5px;"></div>
    <el-col>

      <el-table :data="tableData" border stripe style="width: 960px">
        <!-- 循环的index -->

        <el-table-column header-align="left" label="序号" width="60">
          <template #="{$index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="60"/>
        <el-table-column label="出生日期" prop="date" width="180"/>
        <el-table-column label="姓名" prop="name" width="180"/>
        <el-table-column label="地址" prop="address"/>
        <el-table-column label="操作">
          <!-- 取出当前对象的id 信息 scope scope.row scope.$index  -->
          <template #="{row}">
            <el-button size="small" type="primary" @click="edit(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <el-dialog draggable v-model="dialogFormVisible" :title="title" width="660">
    <el-form :model="form">
      <el-form-item label="ID">
        <el-input v-model="form.id"/>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="form.date" type="date" value-format="YYYY-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="家庭地址：">
        <el-input v-model="form.address"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDialogOk">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const tableData = ref([
  {id: 100, date: '2016-05-03', name: '张三', address: 'No. 189, Grove St, Los Angeles',},
  {id: 888, date: '2016-05-02', name: '李四', address: 'No. 189, Grove St, Los Angeles',},
  {id: 102, date: '2016-05-04', name: '王五', address: 'No. 189, Grove St, Los Angeles',},
  {id: 103, date: '2016-05-01', name: '赵六', address: 'No. 189, Grove St, Los Angeles',},
])

function show(row: any): void {
  console.log(row)
}

function del(id: number): void {
  tableData.value = tableData.value.filter(item => item.id !== id)
}

const dialogFormVisible = ref(false)

const form = ref({
  id: 100,
  name: 'jack',
  date: '2016-05-03',
  address: '郑州'
})
const title = ref('新增数据')

function add() {
  dialogFormVisible.value = true
  title.value = '新增数据'

  let maxid = tableData.value[0].id
  for (let item of tableData.value) {
    if (maxid < item.id) {
      maxid = item.id
    }
  }


  form.value = {
    id: maxid + 1,
    name: '',
    date: '',
    address: '',
  }

}

function edit(row: any) {
  title.value = `编辑：${row.name}`
  form.value = row
  dialogFormVisible.value = true
}

function handleDialogOk() {
  if (title.value.includes('新增')) {
    //新增
    console.log('新增数据')
    console.log(form.value)
    tableData.value.push(form.value)
    dialogFormVisible.value = false
  } else {
    //编辑
    dialogFormVisible.value = false
  }
}
</script>
